import React from 'react';
import {Popover, Avatar, List} from 'antd';
import {UserOutlined} from '@ant-design/icons';
import './styles.less';
import {connect} from 'react-redux';

class InterviewPop extends React.Component {
    constructor(props) {
        super(props);
    }

    createInterviewItem = () => {
        const {dataSource, account} = this.props;
        return dataSource.map( (item, index) => {
            const {content} = item;
            let receive = account.username !== item.form;
            return (
                <List.Item key={index} style={{border: 'none'}}>
                    <div style={{display: 'block', width: '100%', textAlign: receive ? 'left' : 'right'}}>
                        {
                            !receive && (
                                <div
                                    className="pop-content pop-content-right"
                                    dangerouslySetInnerHTML={{
                                        __html: content.replace(/&#60;/g,'<').replace(/&#62;/g, '>').replace(/&#47;/g, '/')
                                    }}>
                                </div>
                            )
                        }
                        <Avatar
                            shape="square"
                            size="large"
                            icon={<UserOutlined />}
                        />
                        {
                            receive && (
                                <div
                                    className="pop-content-left pop-content"
                                    dangerouslySetInnerHTML={{
                                        __html: content.replace(/&#60;/g,'<').replace(/&#62;/g, '>').replace(/&#47;/g, '/')
                                    }}>
                                </div>
                            )
                        }
                    </div>
                </List.Item>
            )
        })
    };

    render() {
        return (
            <List>
                <List.Item style={{border: 'none'}} key="pop-title">
                    <a
                        onClick={this.props.onClick}
                        style={{
                            display: 'inline',
                            color: 'rgba(0, 119, 247, 0.984)',
                            margin: '0 auto'}}>
                        查看更多消息...
                    </a>
                </List.Item>
                {this.createInterviewItem()}
            </List>
        )
    }
}

const mapStateToProps = (state) => ({account: state.account});

export default connect(
    mapStateToProps
)(InterviewPop);